<template>
  <div class="OA">
    <div
      class="home_QA_btn"
      :style="{
        width: itemWidth + 'px',
        height: itemHeight + 'px',
        left: left + 'px',
        top: top + 'px',
      }"
      @click.stop="show"
      ref="div"
    >
      <slot name="icon"></slot>
    </div>
    <div class="dialog_warp" :style="dialog_warp_style"  v-show="isShow">
      <transition name="el-fade-in-linear">
        <div class="dialog_box">
          <div class="dialog_box_hear">
            <span>常见问题</span>

            <i class="el-icon-close close" @click="close"></i>
          </div>
          <div class="dialog_content">
            <div class="dialog_content_search">
              <el-input placeholder="请输入关键词搜索" v-model="searchValue">
                <el-button slot="append" icon="el-icon-search" @click="searchSubmit"></el-button>
              </el-input>
            </div>
            <div class="dialog_content_Q">
              <template v-if="questionList && questionList.length">
                <ul v-for="item in questionList" :key="item.id">
                  <!-- @click="goQA(item.id)" -->
                  <li class="item" >
                    <a  :href="`${HTTPDOMAIN}/QA?articleId=${item.id}`" target="_blank"><span>{{ item.question }}</span></a>
                    <!-- <span>{{ item.question }}</span> -->
                  </li>
                </ul>
              </template>
              <template v-else>
                <div class="noData">
                  <span>暂无可用问题</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import {HTTPDOMAIN} from '~/util/config'
export default {
  name: "FloatImgBtn",
  props: {
    text: {
      type: String,
      default: "默认文字",
    },
    itemWidth: {
      type: Number,
      default: 40,
    },
    itemHeight: {
      type: Number,
      default: 40,
    },
    gapWidth: {
      type: Number,
      default: 80,
    },
    coefficientHeight: {
      type: Number,
      default: 0.8,
    },
  },
  data() {
    return {
      timer: null,
      currentTop: 0,
      clientWidth: 0,
      clientHeight: 0,
      left: 0,
      top: 0,
      searchValue: "",
      isShow: false,
      questionList: [],
      dialog_warp_style: {},
      HTTPDOMAIN: HTTPDOMAIN,
    };
  },
  created() {},
  mounted() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
    this.left = this.clientWidth - this.itemWidth - this.gapWidth;
    this.top = this.clientHeight * this.coefficientHeight;

    this.dialog_warp_style = {
      left: `${this.left - 340}px`,
      top: `${this.top - 320}px`,
    };
    // window.addEventListener("scroll", this.handleScrollStart);
    // this.$nextTick(() => {
    //   const div = this.$refs.div;
    //   div.addEventListener("mouseover", () => {
    //     div.style.transition = "none";
    //   });
    //   div.addEventListener("mousedown", e => {
    //     // console.log(e)
    //     // if (e.targetTouches.length === 1) {
    //     //   let touch = event.targetTouches[0];
    //       this.left = e.clientX - this.itemWidth / 2;
    //       this.top = e.clientY - this.itemHeight / 2;
    //     // }
    //   });
    //   div.addEventListener("mouseup", () => {
    //     div.style.transition = "all 0.3s";
    //     if (this.left > this.clientWidth / 2) {
    //       this.left = this.clientWidth - this.itemWidth - this.gapWidth;
    //     } else {
    //       this.left = this.gapWidth;
    //     }
    //   });
    // });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollStart);
  },
  methods: {
    show() {
      // this.$emit("onFloatBtnClicked");
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
        if (this.questionList.length == 0) {
          this.getQuestionList();
        }
      }
    },
    close () {
      this.searchValue = ''
      this.isShow = false
    },
    goQA(id) {
      this.$router.push({
        path: '/QA',
        query: {articleId: id}
      })
    },
    searchSubmit () {
      let params = {
        question: this.searchValue
      }
      if (this.searchValue) this.getQuestionList(params)
    },
    getQuestionList(arg) {
      let params = {};
      if (arg) {
        params = { ...arg, ...params };
      }
      this.$axios.get("api/question", { params: params }).then((res) => {
        if (res.data.code == 200) {
          this.questionList = res.data.data;
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      });
    },
    handleScrollStart() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleScrollEnd();
      }, 300);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.left > this.clientWidth / 2) {
        this.left = this.clientWidth - this.itemWidth / 2;
      } else {
        this.left = -this.itemWidth / 2;
      }
    },
    handleScrollEnd() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop === this.currentTop) {
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth;
        } else {
          this.left = this.gapWidth;
        }
        clearTimeout(this.timer);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.OA {
  .home_QA_btn {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.066667rem;
    height: 1.066667rem;
    z-index: 100;
    // bottom: 1.6rem;
    // right: .533333rem;
    left: 85%;
    top: 70%;
    font-size: 0.586667rem;
    border-radius: 50%;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.3),
      inset 0px -1px 0px 0px rgba(0, 0, 0, 0.3);
    color: #1989fa;
    i {
      font-size: 44px;
      cursor: pointer;
    }
  }
  .dialog_warp {
    position: fixed;
    width: 340px;
    height: 320px;
    z-index: 100;
    .dialog_box {
      width: 100%;
      height: 100%;
      background: #fff;
      box-shadow: 4px 6px 9px 0px rgba(206, 206, 206, 0.5);
      border-radius: 10px;

      .dialog_box_hear {
        border-radius: 10px 10px 0 0;
        height: 50px;
        background: linear-gradient(127deg, #00b2ff 0%, #007aff 100%);
        span {
          font-size: 20px;
          color: #ffffff;
          line-height: 50px;
          margin-left: 20px;
        }
        .close {
          position: absolute;
          right: 15px;
          top: 15px;
          font-size: 20px;
          color: #fff;
          opacity: .5;
        }
      }

      .dialog_content {
        
        .dialog_content_search {
          padding: 20px;
          box-sizing: border-box;
          width: 100%;

          /deep/.el-input {
            .el-input__inner {
              border-top-left-radius: 20px;
              border-bottom-left-radius: 20px;
              background: #f2faff;
            }
            .el-input-group__append {
              background: #f2faff;
              border-top-right-radius: 20px;
              border-bottom-right-radius: 20px;

              .el-button {
                // background: #F2FAFF;
                color: #5c8ae0;
              }
            }
          }
        }
        .dialog_content_Q {
          height: 190px;
          overflow-y: auto;
          padding: 0 25px 25px 25px;
          box-sizing: border-box;
          ul {
            li {
              list-style: none;
            }
          }
          .item {
            color: #0085FF;
            margin: 5px 0;
            padding: 6px 15px;
            font-size: 16px;
            word-break: break-word;
            border-radius: 100px;
            display: inline-block;
            background-color: #f6f6f6;
            cursor: pointer;
            a {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>